<template>
    <div class="login">
      <div class="login-wrapper">
        <div class="item"><input type="text" class="form-data tel" placeholder="请输入手机号" v-model="tel"><button ref="btnAuth" class="btn-auth" @click="_getAuthCode"  >获取验证码</button></div>
        <div class="item"><input type="text" class="form-data auth" placeholder="请输入验证码" v-model="auth"></div>
        <div class="item"><button class="smt" @click="_toLogin">登录</button></div>
      </div>
    </div>
</template>
<script>
  import global from '../../common/global/global'
  import axios from 'axios'
  import { Toast } from 'mint-ui';
  import {setStorage} from "../../common/js/localStorage";
  import {getStorage} from "../../common/js/localStorage";
  import {isPhoneNum} from "../../common/js/filter"
  // import {toast}
  export default {
        name: "login",
        data(){
          return{
            tel:'',
            auth:'',
            count:60
          }
        },
        created() {
        },
        methods:{
          _getAuthCode(){
            //判断是否能点击
            if(this.count!=60){
              return
            }
            let _this = this
            //手机号格式验证
            if(isPhoneNum(this.tel)===false){
              Toast({
                message:'手机号格式错误哦！'
              })
              return
            }
            axios({
              method:'post',
              url:global.$host+'/api/open/common/sendCode',
              params:{
                type:2,
                phone:this.tel
              }
            }).then(res =>{
              if(res.status===global.ERR_OK){
                if(res.data.status===global.CUSTOM_ERR_OK){
                  let text = ''
                  var time = window.setInterval(function () {
                    _this.count = _this.count -1
                    _this.count<10?text = '0'+_this.count+ '秒':text = _this.count+ '秒'
                    _this.$refs.btnAuth.innerHTML=text
                    //秒数=0初始化
                    if(_this.count===0){
                      _this.$refs.btnAuth.innerHTML='重新发送'
                      window.clearInterval(time)
                      _this.count=60
                    }
                  },1000)
                }
              }else {
                Toast({
                  message:'验证码获取失败！'
                })
              }
            }).catch(e =>{
              Toast({
                message:'验证码获取失败！'
              })
            })

          },
          _toLogin(){
            axios({
              method:'post',
              url:global.$host+'/api/open/login',
              params:{
                phone:this.tel,
                code:this.auth
              }
            }).then(res=>{
                if(res.status===global.ERR_OK){
                  if(res.data.status===global.CUSTOM_ERR_OK){
                    this.tel=''
                    this.auth=''
                    setStorage('token',res.data.data.token)
                    //判断localStorage中保存的token是否和
                    if(getStorage('token')===res.data.data.token){
                      this.$router.push('/authentication')
                    }
                  }
                }
            })
          }
        }
    }
</script>

<style scoped lang="stylus">
  .login
    height calc(100% - 44px)
    position absolute
    overflow auto
    width 100%
    .login-wrapper
      position absolute
      top 30%
      width calc(100% - 40px)
      margin 0 20px
      .item
        position relative
        text-align center
        height 51px
        line-height 51px
        margin-bottom 26px
        .btn-auth
          position absolute
          top 0
          right -1px
          height 53px
          width 98px
          border none
          outline none
          border-bottom-right-radius 26px
          border-top-right-radius 26px
          color #ffffff
          background #49A2FE
          font-size 16px
        .form-data
          width calc(100% - 108px)
          height 51px
          border-radius 26px
          border none
          outline none
          padding-left 53px
          padding-right 55px
          box-shadow 1px 1px 1px 1px rgba(180,180,180,0.3)
          color #333333
          font-size 17px
          &::-webkit-input-placeholder
            color #B7B7B7
          &.tel
            background url("input_icon01@2x.png")no-repeat 21px center/21px
          &.auth
            background url("input_icon02@2x.png")no-repeat 21px center/21px
        .smt
          height 51px
          color #ffffff
          width 100%
          border-radius 26px
          border none
          background #49A2FE
          font-size 18px
          outline none
</style>
